﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutFront.cshtml";
}
<style>
    .header-nav {
        background-color: #b9abce;
    }

    body {
        color: black;
    }
      ol, ul {
    padding-left: 20em;
}
      .pro-list {   
    padding: 20px 50px 150px;
}
      div {
    display: block;
    margin-top:5px;
}
</style>

<section class="pro-list">
    <aside class="pro-leftsidebar">
        <ul>
            <li>
                <a>产品搜索</a>
                <ul id="pro-search">
                    <li><a><input type="text" id="name" class="pro-search"><a class="pro-search-btn" id="search">搜索</a></a></li>
                </ul>
            </li>
            <li>
                <a>产品分类</a>
                <ul id="pro-category">
                    @foreach (var item in ViewBag.A)
                    {
                        <li id="Id"><a href="~/Product/Index/@item.Id?TypeName=@item.Name">@item.Name</a></li>
                    }
                </ul>
            </li>
        </ul>
    </aside>
    <aside class="pro-rightsidebar">
        <header>
            <p></p>
            <span>@ViewBag.D</span>
        </header>
        <div id="my_limit"></div>
        <p></p>
        <input type="hidden" id="TypeId" value="@ViewBag.C">
        <ul id="my_page"></ul>
    </aside>
</section>
<script>
    $(function () {
        var pageNum = 1;//默认是第一页
        var limit = 3;//默认每页显示多少条
        getData(pageNum, limit)//调用请求
        $("#search").click(function () {
            getData(pageNum, limit);//调用请求
        });
        function getData(pageNum,limit) {
            $.ajax({
                url: "/Product/DelPage",
                type: "post",
                dataType: "json",
                data: {
                    page: pageNum,//当前页数
                    limit: limit,//每页多少条
                    TypeId: $("#TypeId").val(),
                    name: $("#name").val()
                },
                success: function (res) {
                    //数据处理
                    if (res.success == true) {
                        var str = "";
                        for (var i = 0; i < res.data.length; i++) {
                            str = str +'<li><a href="/ProductDetail/Index/'
                            +res.data[i].Id+
                            '"><div class="img-box"><img  style="height:150px" src="/'
                            + res.data[i].ImgUrl +
                            '"><p>'
                            +res.data[i].Name+
                            '</p></div></a></li>'
                        }
                        $("#my_limit").html(str);

                        //调用分页插件
                        //分页
                        $("#my_page").sPage({
                            page: pageNum,//当前是第几页
                            total: res.count,//数据总条数
                            pageSize: limit,//每页多少条
                            fastForward: 0,//默认显示多少页
                            backFun: function (page) {
                                pageNum = page;//pageNum变成第2页......
                                getData(pageNum, limit)//调用请求
                            }
                        })
                    }
                }
            })
        }
    })
</script>

